<template>
  <a-style-provider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
    <a-config-provider
      :locale="zhCN"
      :theme="{
        algorithm: theme[store.userStore.theme],
        token: store.userStore.color,
        components: store.userStore.components
      }"
    >
      <router-view></router-view>
    </a-config-provider>
  </a-style-provider>
</template>

<script setup lang="ts">
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
import { ref, watch } from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { theme } from 'ant-design-vue'
import store from './store'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

watch(
  store.userStore.color,
  () => {
    document.documentElement.style.setProperty(
      '--color--primary',
      store.userStore.color.colorPrimary
    )
    document.documentElement.style.setProperty('--color--danger', store.userStore.color.colorDanger)
  },
  {
    immediate: true
  }
)
// const app = userApp()
// const router = useRouter()

// const routeNew = ref({})
// const routeOld = ref({})

// const contrast = (t1, t2) => {
//   const f1 = t1.split('/')
//   const f2 = t2.split('/')
//   if (f1.length && f2.length && f1.length !== f2.length) {
//     let min = 0
//     if (f1.length < f2.length) {
//       min = f1.length
//     } else {
//       min = f2.length
//     }
//     let flag = false
//     for (let i = 0; i < min; i++) {
//       if (f1[i] !== f2[i]) {
//         flag = true
//         break
//       }
//     }
//     if (!flag) {
//       return false
//     }
//   }
//   return true
// }

// watch(
//   () => router.currentRoute.value,
//   (n, o) => {
//     routeNew.value = n
//     routeOld.value = o
//     if (contrast(n.path, o.path)) {
//       app.keepAliveRoutesClear()
//     }
//     if (n.meta.keepalive) {
//       app.keepAliveRoutesPush(n.name)
//     }
//   }
// )

// const handleBeforeUnload = () => {
//   if (routeOld.value?.meta?.keepalive) {
//     app.keepAliveRoutesDel(routeOld.value?.name)
//   }
//   console.log('页面后退了')
// }
// window.addEventListener('popstate', handleBeforeUnload)
</script>

<style lang="less">
body {
  html[data-theme='light'] {
    background: #fff;
    color: #000;
  }
  html[data-theme='dark'] {
    background: #000;
    color: #fff;
  }
}

#app {
  height: 100%;
  box-sizing: border-box;
}

.page-enter-active {
  // position: fixed;
  // top: 0;
  // left: 0;
  transition: all 0.4s ease-in-out;
}
.page-leave-active {
  // position: fixed;
  // top: 0;
  // left: 0;
  transition: all 0.4s ease-in-out;
}
.page-enter-from {
  opacity: 0;
}
.page-enter-to {
  opacity: 1;
}
.page-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.page-leave-to {
  transform: translateX(-2em);
  opacity: 0;
}
</style>
